
<div class="widget-modal-heading">
    View Collectors
</div>

<table mat-table [dataSource]="this.collectors" *ngIf="this.collectors" multiTemplateDataRows>

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef><h3>Collector Name</h3></th>
        <td mat-cell class="collector-name" *matCellDef="let collector">{{collector.name}}</td>
    </ng-container>

    <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef><h3>Online</h3></th>
        <td mat-cell class="online-status" *matCellDef="let collector">
            <mat-icon *ngIf="collector.online" style="color: #28a745">check_circle</mat-icon>
            <mat-icon *ngIf="!collector.online" style="color: #dc3545">cancel</mat-icon>
        </td>
    </ng-container>

    <ng-container matColumnDef="expandedRow">
        <td mat-cell *matCellDef="let collector" class="expanded-detail" [attr.colspan]="2">
            <div class="expanded-detail-block" [@detailExpand]="collector == expandedDetails ? 'expanded' : 'collapsed'">
                <div class="expanded-details">
                    <div class="expanded-type row">
                        <div class="col-md-3">Collector Type: </div>
                        <div class="col-md-3">{{collector.collectorType}}</div>
                    </div>
                    <div class="expanded-keys row">
                        <div class="col-md-3">Enabled: </div>{{collector.enabled}}
                    </div>
                    <div class="expanded-keys row">
                        <div class="col-md-3">Last Executed:</div>
                        {{this.convertToReadable(collector.lastExecuted)}}
                    </div>
                    <div class="expanded-keys row" *ngIf="collector.lastExecutedSeconds">
                        <div class="col-md-3">Run Duration:</div>
                        {{collector.lastExecutedSeconds}}s
                    </div>
                    <div class="expanded-keys row" *ngIf="collector.uniqueFields && this.getFields(collector.uniqueFields).length > 0">
                        <div class="col-md-3">Unique Fields: </div>
                        <div class="col-md-3">
                            <span class="fields" *ngFor="let field of this.getFields(collector.uniqueFields)">{{field}}</span>
                        </div>
                    </div>
                    <div class="expanded-keys row" *ngIf="collector.allFields && this.getFields(collector.allFields).length > 0">
                        <div class="col-md-3">All Fields: </div>
                        <div class="col-md-3">
                            <span class="fields" *ngFor="let field of this.getFields(collector.allFields)">{{field}}</span>
                        </div>
                    </div>
                    <div class="expanded-keys row" *ngIf="collector.errors && collector.errors.length > 0" >
                        <div class="col-md-3">Errors:</div>
                        <div class="col-md-9">
                            <span class="fields" *ngFor="let error of collector.errors">
                                <div class="error-message">
                                    <div>Error Code: 
                                        <span style="color:lightgray">{{error.errorCode}}</span>
                                    </div>
                                    <div>Error Message: 
                                        <span style="color:lightgray">{{error.errorMessage}}</span>
                                    </div>
                                    <div>Timestamp: 
                                        <span style="color:lightgray">{{this.convertToReadable(error.timestamp)}}</span>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
    <tr mat-row class="collector-row" *matRowDef="let collector; columns: displayColumns;" 
        (click)="expandedDetails = expandedDetails === collector ? null : collector"
        [class.collector-expanded-row]="expandedDetails === collector">
    </tr> <!-- makes expansion a toggle -->
    <tr mat-row class="expanded-detail-row" 
        *matRowDef="let row; columns: ['expandedRow']"
    ></tr>
</table>
